<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 目标对象
        const user = {
                name: 'kangroo',
                age: 20,
                wife: {
                    name: '萧筱',
                    age: 19
                }
            }
            // 把目标对象变成代理对象
            //参数1：user----->target目标对象
            // 参数2：handler----->处理器对象，用来监视数据及数据的操作
        const proxyUser = new Proxy(user, {
            // 获取目标对象的某个属性值
            get(target, prop) {
                console.log('get方法调用了');
                return Reflect.get(target, prop);
            },
            //不仅可以修改属性值，还可以为目标对象添加新属性
            set(target, prop, val) {
                console.log('set方法调用了');
                return Reflect.set(target, prop, val)
            },
            // 删除目标对象上的某个属性
            deleteProperty(target, prop) {
                console.log('delete方法调用了');
                return Reflect.deleteProperty(target, prop);
            }

        })

        // 通过代理对象获取目标对象中的某个属性值
        console.log(proxyUser.name);
        //通过代理对象更新目标对象上的某个属性值
        proxyUser.name = '新名字';
        console.log(user.name);
        //通过代理对象向目标对象中添加一个新的属性
        proxyUser.gender = '男';
        console.log(user);

        delete proxyUser.name;
        console.log(user);
        //更新目标对象中的某个属性对象中的属性值
        proxyUser.wife.name = 'new萧'
        console.log(user);
    </script>
</body>

</html>